$cardWidth: 18%;	
.item-boxset.item {
	gap: 1em;
	.item-hero {
		height: 60vh;
		gap: 2em;
		row-gap: 1.2em;
		position: relative;
		align-items: flex-end;
		margin-bottom: 1em;
		display: grid;
		grid-template-columns: $cardWidth 1fr;
		grid-template-rows: 1fr auto;
		&-image {
			opacity: 0;
			width: 100%;
			object-fit: contain;
			transition: opacity $transition-time-default;
			&-container {
				height: fit-content;
				max-height: 100%;
				overflow: hidden;
				border-radius: $border-radius-default;
				box-shadow: $shadow-card;
				flex-grow: 1;
				flex-shrink: 0;
				position: relative;
				width: 100%;
			}
			&-blurhash {
				position: absolute !important;
				width: 100% !important;
				height: 100% !important;
				z-index: -1;
			}
			&-icon {
				background: linear-gradient(45deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.15));
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.material-symbols-rounded{
					font-size: 4em;
				}
			}
		}
		&-logo {
			max-width: 34rem;
			max-height: 10rem;
			opacity: 0;
			transition: opacity $transition-time-default;
			object-position: bottom;
			margin-bottom: 2em;
		}
		&-detail {
			width: 100%;
			align-items: flex-start;
			gap: 0.2em;
			justify-content: end;
		}
		&-buttons {
			&-container {
				align-items: center;
				justify-content: space-between;
				width: 100%;
				grid-column: 1/3;
				display: grid;
				grid-template-columns: inherit;
				gap: 2em;
			}
		}
		&-backdrop {
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			object-position: top;
			opacity: 0;
			transition: opacity $transition-time-default;
			&-container {
				filter: brightness(0.8);
				position: absolute;
				top: -4.4em;
				left: -$page-margin;
				width: 100vw;
				height: calc(54vh + 4.4em);
				z-index: -1;
				mask-image: linear-gradient(to top, transparent, black);
				-webkit-mask-image: linear-gradient(
				to top,
				transparent,
				black
				);
			}
		}
		& .play-button {
			width: 100% !important;
		}
	}

	.item-detail {
		display: grid;
		grid-template-columns: 1fr 35%;
		justify-items: center;
		align-items: start;
		gap: 3em;

		&-cast {
			&-container {
				display: flex;
				flex-direction: column;
				gap: 1em;
			}
			&-grid {
				display: grid;
				grid-template-columns: repeat(5, minmax(0, 1fr));
				gap: 1em;
				margin-bottom: 1em;
			}
			&-card {
				display: grid;
				grid-template-columns: 6em 1fr;
				gap: 0.5em;
				align-items: center;
				color: white !important;
				text-decoration: none;
				padding: 0.5em;
				background: rgb(255 255 255 / 0);
				transition: background $transition-time-default;
				border-radius: $border-radius-default;
				&:hover {
					background: rgb(255 255 255 / 0.1);
				}
				&-image,
				&-icon {
					width: 6em;
					height: 6em;
					object-fit: cover;
					border-radius: 100%;
					box-shadow: $shadow-card-image;
				}
				&-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 1em;
					background: rgb(255 255 255 / 0.1);
					.material-symbols-rounded {
						font-size: 3em;
					}
				}
			}
		}
		&-link {
			color: white;
			text-decoration-color: rgb(255 255 255 / 0.5);
			&:hover {
				text-decoration-color: white;
			}
		}
	}
}
